import Vue from 'vue'

import Cookies from 'js-cookie'

import ElementUI from 'element-ui'

import './assets/less/base.scss'
import './assets/less/style.scss'
import './assets/less/scrollbar.css'
import 'font-awesome/css/font-awesome.css'

import 'element-ui/lib/theme-chalk/index.css'

import '@/common/styles/index.scss' // global css
import 'handsontable-pro/dist/handsontable.full.css' // handsontable css
import 'handsontable-pro/languages/zh-CN'

import App from './App'
import router from './router'
import store from './store'
import eventBus from '@/common/utils/eventBus'

import i18n from '@/common/lang' // Internationalization
import '@/common/icons' // icon
import '@/common/utils/permission' // permission control

import Layout from '@/views/layout/Layout'
/* 波特周添加的开始*/

import animated from 'animate.css'

Vue.use(animated)
/* 波特周添加的结束*/

// vue 存储
import Storage from 'vue-ls'
// splitPane
import splitPane from '@/components/split-pane/index.vue'
import _ from 'lodash'
Vue.prototype._ = _

// const dComponentsMap = {}

Vue.prototype.registPath = function(path, param, title, cache) {
    if (cache === null) {
        cache = false
    }
    const repath = path
    const name = path.split('/')[path.split('/').length - 1]
    // const basePath = path.replace(`/${name}`, '')
    // dComponentsMap[name] = function() {
    //     return import(`@/views${repath}`)
    // }
    var vl = {
        path: `/${name}`,
        component: Layout,
        name: `${name}_wrap`,
        hidden: true,
        children: [
            {
                path: repath,
                component: () => import(`@/views${repath}`),
                name,
                meta: {
                    noCache: !cache, // 不需要缓存
                    title
                }
            }
        ]
    }
    const allRouter = new Set(this.$store.getters.routers)
    const addAllRouters = new Set(this.$store.getters.addRouters)
    allRouter.add(vl)
    addAllRouters.add(vl)
    console.log(addAllRouters)

    this.$store.dispatch('registRouter', {
        routers: Array.from(addAllRouters)
    }).then(res => {
        console.log(vl)
        this.$router.addRoutes([vl])
        this.$store.commit('SET_ALLPATH', [repath])
        console.log('注册结束')
        if (param) {
            console.log('进param')
            this.$router.push({ path: repath, query: param })
        } else {
            console.log('不进param')
            this.$router.push(repath)
        }
    }).catch((err) => {
        store.dispatch('FedLogOut').then(() => {
            console.log(err)
        })
    })
}
// 添加全局注册动态路由方法
Vue.prototype.gotoMyehrPath = function(path, param, title, cache) {
    console.log(path, param, title, cache)
    if (this.$store.getters.allPathList.indexOf(path) === -1) {
        console.log('registPath')
        this.registPath(path, param, title, cache)
    } else {
        if (param) {
            console.log('进param')
            this.$router.push({ path: path, query: param })
        } else {
            console.log('不进param')
            this.$router.push(path)
        }
    }
}

Vue.use(ElementUI, {
    size: Cookies.get('size') || 'medium', // set element-ui default size
    i18n: (key, value) => i18n.t(key, value)
})
// eventBus 拥有生命周期
Vue.use(eventBus)

// Vue.use(FormMaking)

const options = {
    namespace: 'vuejs__', // key prefix
    name: 'ls', // name variable Vue.[ls] or this.[$ls],
    storage: 'local' // storage name session, local, memory
}

Vue.use(Storage, options)

Vue.directive('tableLoadmore', {
    bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-table__body-wrapper')

        SELECTWRAP_DOM.addEventListener('scroll', function() {
            /*
             * scrollHeight 获取元素内容高度(只读)
             * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
             * clientHeight 读取元素的可见高度(只读)
             * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
             * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
             */
            let sign = 80 // 定义默认的向上滚于乡下滚的边界
            const CONDITION = ((this.scrollHeight - this.scrollTop === this.clientHeight) &&
                this.scrollTop > sign)// 注意: && this.scrollTop

            if (this.scrollTop > sign) {
                sign = this.scrollTop
                console.log('向下')
            }
            if (this.scrollTop < sign) {
                sign = this.scrollTop
                console.log('向上')
            }

            if (CONDITION) {
                binding.value()
            }
        })
    }
})

Vue.component('split-pane', splitPane)

Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    store,
    i18n,
    render: h => h(App)
})
